<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>动弹_frm</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
		#more, .more{
			margin-top: 0px;
			padding-top: 3px;
			padding-bottom: 20px;
			text-align: center;
		}
		#content .aui-user-view-cell:active {
			background: #ffffff;
		}

		.aui-user-view-cell:after {left: 0;}
		.content { font-size: 14px; color: #666666;}
		.otherinfo p { font-size: 12px; margin-bottom: 5px;}
		
		#like{
			padding: 5px 10px;
		}
		
		.aui-user-view-cell:first-child:after {
			border-top: 0px solid #c8c7cc;
		}
		#content .aui-user-view-cell:after {
			border-bottom: 0px solid #c8c7cc;
		}
		.aui-list-view {
			margin-bottom: 0;
		}
		.aui-padded-5-10{
			padding: 5px 10px;
		}
		#commentStrip{
			background-color: #E9E9EB !important;
		}
    </style>
</head>
<body>
    <div class="aui-content">
        <ul>
            <li class="aui-list-view"  id="content">
                <!--div class="aui-user-view-cell aui-img">
                    <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/1212/2425409_50.jpg?t=1445480650000">
                    <div class="aui-img-body">
                        <span class="aui-text-primary">Tina_Ran<em><font id="like" class="aui-iconfont aui-icon-appreciatefill aui-text-primary"></font></em></span>
                        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 昨天　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
                    </div>
                </div>
                <div class="aui-padded-0-10 content">
                    今儿晚上准备这身行头去相亲→.→各位男神求科普，男生特别讨厌第一次见面的女生做什么事嘞？ 
                </div>
                <ul class="aui-list-view aui-grid-view">
                    <li class="aui-list-view-cell aui-img aui-col-xs-12">
                        <img class="aui-img-object" src="http://static.oschina.net/uploads/space/2015/1022/093331_MmeV_2425409.jpg">
                    </li>
                </ul>
                <div class="aui-padded-0-10">
                	<p><font class="aui-text-primary">哇的、啊盛大风、格是</font> 等45人觉得很赞</p>
                </div-->
            </li>
        </ul>
    </div>
	
	<div id="commentStrip" class="aui-col-xs-12 aui-padded-5-10"><b><span id="commentCount">0</span> 条评论</b></div>
	
    <div class="aui-content">
        <ul class="aui-user-view" id="list">
            <!--li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/523/1047279_50.jpg?t=1418696812000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">君遥</span>
                    <h5 class='aui-text-default'>最近猛的一下子手里抓到3个资源，不知道怎么选择了，一号女，长相一般普普通通或者说偏下，不过在北京有房，工作护士；二号女，韩国留学7年，硕士毕业，北京工作金融方面；三号女，年纪小，92年，长相偏上，护士工作。这个，我该怎么选择。。。</h5>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
                </div>
            </li>
            <li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/523/1047279_50.jpg?t=1418696812000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">君遥</span>
                    <h5 class='aui-text-default'>最近猛的一下子手里抓到3个资源，不知道怎么选择了，一号女，长相一般普普通通或者说偏下，不过在北京有房，工作护士；二号女，韩国留学7年，硕士毕业，北京工作金融方面；三号女，年纪小，92年，长相偏上，护士工作。这个，我该怎么选择。。。</h5>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
                </div>
            </li>
            <li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/523/1047279_50.jpg?t=1418696812000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">君遥</span>
                    <h5 class='aui-text-default'>最近猛的一下子手里抓到3个资源，不知道怎么选择了，一号女，长相一般普普通通或者说偏下，不过在北京有房，工作护士；二号女，韩国留学7年，硕士毕业，北京工作金融方面；三号女，年纪小，92年，长相偏上，护士工作。这个，我该怎么选择。。。</h5>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
                </div>
            </li-->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	var UIChatBoxObj;
	var uid = $api.getStorage('user_uid');		// 发表评论人的id。也就是当前操作者(我)的id
	var tweetId = 0;		// 动弹id
	var isPostToMyZone = 1;	//是否转发到我的空间
	var catalog = 3;		// 评论类型
	
	var pageParam;
	var page = 0, ajaxTag = 0;
    apiready = function(){
    	UIChatBoxObj = api.require('UIChatBox');
    	
		pageParam = api.pageParam;
		tweetId = pageParam.id;
		
		// Window或者Frame页面滑动到底部事件,可用于实现滚动到底部，加载更多功能
		api.addEventListener({
		    name:'scrolltobottom',
		    extra:{
		        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
		    }
		},function(ret,err){
		    getCommentList( tweetId, page )
		});
		
		getDetail( tweetId );
		
		openCommentBox();
    };
    
    // 获取动弹详情
    function getDetail( id ){
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '加载中...',
		    text: '',
		    modal: true
		});
		
		var contentHtml = '';
		var url = OpenAPI.tweet_detail + '?id=' + id;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		},function(ret,err){
			api.hideProgress();
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						contentHtml +=   '<div class="aui-user-view-cell aui-img">';
			    		var portrait = '../image/widget_dface.png';
			    		if(typeof(ret.oschina.tweet.portrait) == 'string' && ret.oschina.tweet.portrait.length > 0){
			    			portrait = ret.oschina.tweet.portrait;
			    		}
						contentHtml +='<img class="aui-img-object aui-pull-left" src="'+portrait+'"  width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.tweet.authorid +' );event.cancelBubble=true;">';
						contentHtml +='<div class="aui-img-body">';
						var isLike = 'aui-icon-appreciate';
						if(parseInt(ret.oschina.tweet.isLike) == 1){
							isLike = 'aui-icon-appreciatefill aui-text-primary';
						}
						contentHtml +='<span class="aui-text-primary">'+ret.oschina.tweet.author+'<em><font id="like" class="aui-iconfont '+ isLike +'" isLike="'+ret.oschina.tweet.isLike+'" tapmode onclick="makeAsLove( '+ret.oschina.tweet.id+', '+ret.oschina.tweet.authorid+' )"></font></em></span>';
						contentHtml +='<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+friendly_time(ret.oschina.tweet.pubDate)+'　<font class="aui-iconfont aui-icon-mobile"></font> ' + getAppClientName(ret.oschina.tweet.appclient) + '</p>';
						contentHtml +='</div>';
						contentHtml +='</div>';
						contentHtml +='<div class="aui-padded-0-10 content">';
						contentHtml +=ret.oschina.tweet.body;
						contentHtml +='</div>';
						contentHtml +='<ul class="aui-list-view aui-grid-view" id="img">';
						if(typeof(ret.oschina.tweet.imgBig) == 'string' && ret.oschina.tweet.imgBig.length > 0){
							contentHtml +='<li class="aui-list-view-cell aui-img aui-col-xs-12">';
							contentHtml +='<img class="aui-img-object" src="'+ ret.oschina.tweet.imgBig +'" tapmode onclick="imageBrowser(\''+ ret.oschina.tweet.imgBig +'\');">';
							contentHtml +='</li>';
						}
						contentHtml +='</ul>';
						
						if( typeof(ret.oschina.tweet.likeList.user) == 'object' ){
							if(typeof(ret.oschina.tweet.likeList.user.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
								ret.oschina.tweet.likeList.user = JSON.parse('['+JSON.stringify(ret.oschina.tweet.likeList.user)+']');
							}
							var likeUserList='';
							var some = parseInt(ret.oschina.tweet.likeCount)>10 ? '等' : '';
							for(var i=0; i<ret.oschina.tweet.likeList.user.length; i++){
								likeUserList += ret.oschina.tweet.likeList.user[i].name + '、';
							}
							likeUserList = likeUserList.substring(0, likeUserList.length - 1);
							contentHtml +='<div class="aui-padded-0-10">';
							contentHtml +='<p><font class="aui-text-primary" id="likeUserList">'+ likeUserList +'</font> '+ some + '<font id="likeCount">' +ret.oschina.tweet.likeCount +'</font>人觉得很赞</p>';
							contentHtml +='</div>';
						}

				    	$api.html($api.byId('content'), contentHtml);
				    	
				    	$api.text($api.byId('commentCount'), ret.oschina.tweet.commentCount);
				    	
				    	getCommentList( id, page );
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		});
    }
    
    // 获取动弹评论列表
    function getCommentList( id, pageIndex ){
    
		if(ajaxTag){
			return false;
		}
		
		var listhtml = '';
    	var url = OpenAPI.comment_list + '&catalog=3&id=' + id + '&pageIndex=' + pageIndex;
	    var more = $api.byId("more");
	    if(more){
	        $api.text(more, '加载中...');
	    }
	    ajaxTag = 1;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    tag: ajaxTag,
		    returnAll: false,
		},function(ret,err){
			ajaxTag = 0;
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
				    	var allCount = parseInt(ret.oschina.allCount); //总评论数 
				    	if( allCount==0 ){
				        	// 移除事件监听
							api.removeEventListener({
							    name: 'scrolltobottom'
							});
				    		$api.html($api.byId('list'), '<p id="more">暂无评论</p>');
				    		return false;
				    	}
						var lastPage = allCount/20;
						
						var more = $api.byId("more");
						if(more){
							 $api.remove(more);
						}
						if(typeof(ret.oschina.comments.comment.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
							ret.oschina.comments.comment = JSON.parse('['+JSON.stringify(ret.oschina.comments.comment)+']');
						}
				    	for(var i=0; i<ret.oschina.comments.comment.length; i++){

				    		var portrait = '../image/widget_dface.png';
				    		if(typeof(ret.oschina.comments.comment[i].portrait) == 'string' && ret.oschina.comments.comment[i].portrait.length > 0){
				    			portrait = ret.oschina.comments.comment[i].portrait;
				    		}
							listhtml += '<li class="aui-user-view-cell aui-img" tapmode onclick="set_reply(\''+ret.oschina.comments.comment[i].author+'\')">';
							listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.comments.comment[i].authorid +' );event.cancelBubble=true;">';
							listhtml += '<div class="aui-img-body">';
							listhtml += '<span class="aui-text-primary">'+ ret.oschina.comments.comment[i].author +'</span>';
							listhtml += '<h5 class="aui-text-default">'+ htmlspecialchars(ret.oschina.comments.comment[i].content) +'</h5>';
							listhtml += '<a class="aui-pull-left">';
							listhtml += '<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+ friendly_time(ret.oschina.comments.comment[i].pubDate) +'　<font class="aui-iconfont aui-icon-mobile"></font> '+ getAppClientName(ret.oschina.comments.comment[i].appclient) +'</p>';
							listhtml += '</a>';
							listhtml += '</div>';
							listhtml += '</li>';
						}
						
				        if(pageIndex == 0){
				        	$api.html($api.byId('list'), listhtml);
				        }else{
				        	$api.append($api.byId('list'), listhtml);
				        }
				        page += 1;
				        if(page < lastPage){
				        	$api.after($api.byId('list'), '<p id="more" tapmode onclick="getList('+page+')">点击加载更多</p>');
				        }else{
				        	// 移除事件监听
							api.removeEventListener({
							    name: 'scrolltobottom'
							});
							
				        	$api.after($api.byId('list'), '<p id="more">全部加载完毕</p>');
				        }
				        
				        
				    }else{
					    if(more){
					        $api.text(more, '加载失败，点击重试');
					    }
				        log(err.msg);
				    }
				});
		    }else {
			    if(more){
			        $api.text(more, '加载失败，点击重试');
			    }
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }

		    setTimeout("api.parseTapmode()", 100);	// 等0.1秒在执行

		});
    }
    
	// 动弹点赞
	function makeAsLove( tweetid, authorid ){
		var uid = parseInt($api.getStorage('user_uid'));
		if( uid<1 ){
			api.toast({
			    msg: '请先登录',
			    duration:2000,
			    location: 'middle'
			});
			return false;
		}
		var like = $api.byId('like');
		var isLike = parseInt($api.attr(like,'isLike'));
		if( isLike==1 ){		// 已经赞了的不可再赞
			return false;
		}
		
		var url = OpenAPI.tweet_like;
		api.ajax({
		    url: url,
		    method: 'post',
		    timeout: 30,
		    dataType: 'text',
		    returnAll: false,
		    data:{
		        values: {
		        	ownerOfTweet: authorid,
		        	tweetid: tweetid,
		        	uid: uid,
		        },
		    }
		},function(ret,err){
			log(ret);
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret && parseInt(ret.oschina.result.errorCode)==1 ) {
				    	$api.attr(like,'isLike', 1);
				    	$api.removeCls(like, 'aui-icon-appreciate');
				    	$api.addCls(like, 'aui-icon-appreciatefill');
				    	$api.addCls(like, 'aui-text-primary');

				    	var likeUserList = $api.byId('likeUserList');
				    	if( likeUserList ){		// 用户列表已存在
				    		var newLikeUserList = $api.getStorage('user_name') + '、' + $api.text(likeUserList);
				    		$api.text(likeUserList, newLikeUserList);
				    		
				    		var likeCount = $api.byId('likeCount');
				    		var newLikeCount = parseInt( $api.text(likeCount) ) + 1;
				    		$api.text(likeCount, newLikeCount);
				    		
				    	}else{	// 用户列表还不存在
				    		var likeHtml = '<div class="aui-padded-0-10"><p><font class="aui-text-primary" id="likeUserList">'+ $api.getStorage('user_name') +'</font> <font id="likeCount">1</font>人觉得很赞</p></div>';
				    		$api.after($api.byId('img'), likeHtml);
				    	}
				    	
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	//showAjaxErrMsg(err.code);
		    }
		});
	}
	
	// 打开评论框
	function openCommentBox(){
		UIChatBoxObj.open({
		    placeholder: '说点什么',
		    maxRows: 4,
		    emotionPath: 'widget://image/UIChatBox/emotion',
		    styles: {
		        inputBar: {
		            borderColor: '#d9d9d9',
		            bgColor: '#f2f2f2'
		        },
		        inputBox: {
		            borderColor: '#B3B3B3',
		            bgColor: '#fdfdfd'
		        },
		        emotionBtn: {
		            normalImg: 'widget://image/UIChatBox/face1.png'
		        },
		        keyboardBtn: {
		            normalImg: 'widget://image/UIChatBox/key1.png'
		        },
		        indicator: {
		            target: 'both',
		            color: '#c4c4c4',
		            activeColor: '#9e9e9e'
		        }
		    },
		}, function(ret){			
		    //点击发送按钮
		    if(ret.eventType == 'send'){
				if( uid<1 ){
					api.toast({
					    msg: '请先登录',
					    duration:2000,
					    location: 'middle'
					});
					UIChatBoxObj.closeKeyboard();	// 收起键盘
					return false;
				}
				
				if( ret.msg.length<1 ){
					api.toast({
					    msg: '请填写内容',
					    duration:2000,
					    location: 'middle'
					});
					return false;
				}
		    
		        comment_pub( ret.msg );
		    }
		});
	
	}
	
	// 提交评论
	function comment_pub( content ){
		var url = OpenAPI.comment_pub;
		api.ajax({
		    url: url,
		    method: 'post',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		    data:{
		        values: {
		        catalog: catalog,
		        content: content,
		        id: tweetId,
		        isPostToMyZone: isPostToMyZone,
		        uid: uid,
		        },
		    }
		},function(ret,err){
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						if(typeof(ret.oschina.result.errorCode) != 'undefined' && parseInt(ret.oschina.result.errorCode)==1){
				    		var portrait = '../image/widget_dface.png';
				    		if(typeof(ret.oschina.comment.portrait) == 'string' && ret.oschina.comment.portrait.length > 0){
				    			portrait = ret.oschina.comment.portrait;
				    		}

							var listhtml = '<li class="aui-user-view-cell aui-img" tapmode onclick="set_reply(\''+ret.oschina.comment.author+'\')">';
							listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px"  tapmode onclick="openUserInfo( '+ ret.oschina.comment.authorid +' );event.cancelBubble=true;">';
							listhtml += '<div class="aui-img-body">';
							listhtml += '<span class="aui-text-primary">'+ ret.oschina.comment.author +'</span>';
							listhtml += '<h5 class="aui-text-default">'+ htmlspecialchars(ret.oschina.comment.content) +'</h5>';
							listhtml += '<a class="aui-pull-left">';
							listhtml += '<p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-time"></font> '+ friendly_time(ret.oschina.comment.pubDate) +'　<font class="aui-iconfont aui-icon-mobile"></font> '+ getAppClientName() +'</p>';
							listhtml += '</a>';
							listhtml += '</div>';
							listhtml += '</li>';
							
							$api.prepend($api.byId('list'), listhtml);
							var more = $api.byId("more");
							if($api.text(more) == '暂无评论'){
								$api.text(more, '全部加载完毕');
							}
							
							var commentCount = parseInt( $api.text($api.byId('commentCount')) ) + 1;
							$api.text($api.byId('commentCount'), commentCount);		// 修改总评论数
							
							set_reply(); 	// 重置评论框
							
							$('body').scrollTop($('#commentStrip').offset().top);		// 滚到第一条评论的位置
							
							setTimeout("api.parseTapmode()", 100);
						}else if( typeof(ret.oschina.result.errorMessage) != 'undefined' ){
							api.toast({
							    msg: ret.oschina.result.errorMessage,
							    duration:2000,
							    location: 'middle'
							});
						}
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    UIChatBoxObj.closeKeyboard();	// 回复后收起键盘
		});
	}
	
	// 点击评论，设置回复评论
	function set_reply( author ){
		var placeholder = '';
		if(arguments.length === 0){	// 清空输入框内容
			placeholder = '说点什么';
			UIChatBoxObj.value({
			    msg: ''
			});
		}else{
			//获取输入框的值
			UIChatBoxObj.value(function(ret, err){
			    if(ret.status){
			      if( ret.msg.indexOf( author ) == -1 ){	// 评论宽里没有@次人，则添加@此人
					var index = ret.msg.length + 1;
					UIChatBoxObj.insertValue({
					    index: index,
					    msg: '@'+author+' '
					});
			      }
			    }
			});
		}
		
		UIChatBoxObj.setPlaceholder({
		    placeholder: placeholder
		});
		UIChatBoxObj.popupKeyboard();
	}
</script>
</html>